<!DOCTYPE html>
<!--[if IE 7 ]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <meta name="description" content="">
    <meta name="author" content="">

    <title>MyTrack101</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
    <link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" />

    <!--[if lt IE 9]>
	    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script>

    <script src="js/jquery.smoothscroll.js"></script>
    <script src="js/jquery.nivo.slider.pack.js"></script>
    <script src="js/jquery.easing-1.3.pack.js"></script>
    <script src="js/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="js/init.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="./gmap/gmap3.min.js"></script> 

    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 5px auto;
        border: 1px dashed #C0C0C0;
        width: 800px;
        height: 600px;
      }
    </style>

    <script type="text/javascript">
    
    function clearMarkers(tag) {
    	setTimeout(function() {
    		$('#gmap').gmap3({
    			clear:{
    				tag:[tag]
    			}
    		});
    	}, 500);
    }
    
    function clearLast() {
    	setTimeout(function() {
    		$('#gmap').gmap3({
    			clear:{
    				name:["marker"],
    				last:true
    			}
    		})
    	})
    }
   
    function addMarker(lat, lng, data) {
    	$('#gmap').gmap3({
    		marker:{
    			values:[{latLng:[lat, lng], data:data}],
    			tag:["markers"]
    		}
    	});
    }
    
    $(document).ready(function(){
    	  $("#clear").click(function(){
    		  clearMarkers("markers");    	  
    	  });
    	  $("#refresh").click(function() {
    		  $.ajax({
    		        type: 'type',
    		        url: 'data?type=map',
    		        data: {contact: contact, days: days},
    		        context: document.body,
    		        beforeSend: function() {
    		        },
    		        success: function(data){
    		        	
    		        }
    		  }
    	  });
    	  
    	  $("#last").click(function(){
    		  clearLast();
    	  })
    });
    
      $(function(){      
        $('#gmap').gmap3({
          map:{
            options:{
              center:[1.3667,103.75],
              zoom: 12
            }
          },
          marker:{
            values:[
              {latLng:[1.3667, 103.75], data:"Singapore", id:"1"},
              {address:"180 Ang Mo Kio Ave 10, Singapore", data:"NYP", id:"red"},
              {address:"Yio Chu Kang MRT, Singapore", data:"MRT", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}, id:"green"}
            ],
            options:{
              draggable: false
            },
            events:{
              mouseover: function(marker, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, marker);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:marker, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            },
           tag:["markers"]
          }
        });
      });
 
 
 
    </script>


</head>

<body>

<!-- header-wrap -->
<div id="header-wrap">
    <header>

        <hgroup>
            <h1><a href="demo.html">MyTrack101</a></h1>
            <h3>Tracking Makes Easy</h3>
        </hgroup>

        <nav>
            <ul>
                <li><a href="demo.html">Map</a></li>
                <li><a href="list.html">List</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>

    </header>
</div>

<!-- content-wrap -->
<div class="content-wrap">

    <!-- main -->
    <section id="main">
    <input type='button' value='clear' id='clear' />
    <input type='button' value='last' id='last' />
    <input type='button' value='refresh' id='refresh' />
    
    <div id="gmap" class="gmap3"></div>


    </section>

</div>

<!-- footer -->
<footer>
    <div class="footer-content">
        <ul class="footer-menu">
                <li><a href="demo.html">Map</a></li>
                <li><a href="list.html">List</a></li>
                <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <p class="footer-text">Template designed by <a href="http://www.styleshout.com/">Styleshout</a> | <a href="http://www.html5xcss3.com" target="_blank">html5xcss3.com</a></p>
    </div>

</footer>

</body>
</html>
